<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <!--<el-form-item label="" style="border: 0px solid red;">-->
        <!--<el-row style="display: flex;flex-direction: row;width: 100%">-->
          <!--<filter-tool class="filtertool" type="goodsTypeId" test="name" v-on:confirm="filterEvent"></filter-tool>-->
          <!--<filter-tool class="filtertool" type="state" test="name" v-on:confirm="filterEvent"></filter-tool>-->
        <!--</el-row>-->
      <!--</el-form-item>-->
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="list">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" prop="title"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="级别">
        <template slot-scope="scope">
          {{gradeList.find(g=>g.val === scope.row.grade).name}}
        </template>
      </el-table-column>
      <el-table-column label="所展客户端" prop="clientId"></el-table-column>
      <el-table-column label="是否公共" prop="isPublic">
        <template slot-scope="scope">
          {{scope.row.isPublic?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click='editBtn(scope.row)' size="mini" icon="edit">编辑</el-button>
          <el-button @click='delBtn(scope.row)' size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="editDefine" :title="currDefine.id?currDefine.title+'-编辑':'新建'" v-if="editDefine" width="80%">
      <edit-define :taskDefine="currDefine" v-on:cancel="getTaskDefineList(0,filterObj)"></edit-define>
    </el-dialog>
  </section>
</template>

<script>
  import editDefine from './editDefine'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "index",
    components:{editDefine,searchTool,filterTool},
    data(){
      return{
        list:null,
        currDefine:null,
        editDefine:false,
        totalPage:0,
        filterObj:{},
        gradeList:[
          {name:'普通用户',val:1},
          {name:'商户',val:5},
          {name:'管理员',val:10},
        ]
      }
    },

    computed:{
      ...mapGetters(['department']),
    },
    created(){
      this.getTaskDefineList()
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      addBtn(){
        this.currDefine={departmentId:this.department.id}
        this.editDefine=true
      },
      goPage(val){
        this.getTaskDefineList(val-1,this.filterObj)
      },
      getTaskDefineList(pageNo,filterObj){
        this.fetch({name:"getTaskDefineList",data:{departmentId:this.department.id,page:pageNo?pageNo:0,...filterObj}})
          .then(res=>{
            console.log('获取任务定义列表-----------',res)
            this.list=res.content
            this.totalPage=res.totalPages
            this.editDefine=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        this.currDefine={...row}
        // this.currDefine.limitCycle=row.data.limitCycle
        // this.currDefine.limitNum=row.data.limitNum
        this.editDefine=true
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delTaskDefine",data:{id:row.id}})
              .then(res=>{
                this.$message({type: 'success',message: '删除成功！'})
                this.getTaskDefineList(0,this.filterObj)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({type: 'info',message: '已取消删除'})
            this.loading = false
          })
      },

      searchEvent(e){
        this.filterObj.key=e
        this.getTaskDefineList(0,this.filterObj)//搜索入库单列表
      },
    }
  }
</script>

<style scoped>

</style>
